<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
    .div1 {
      width: 20px;
      height: 20px;
      background-color: red;
    }
    #li1 .div2 {
      width: 60px;
      height: 40px;
      background-color: yellow;
    }
    #li2 .div2 {
      width: 60px;
      height: 40px;
      background-color: pink;
    }
    div {
      display: inline-block;
    }
    #li1 {
      background-color: green;
    }
    li {
      background-color: yellow;
      height: 80px;
    }
    .simg {
      width: 40px;
    }
    .bimg {
      width: 80px;
    }
    ul li:last-child {
      background-color: blue;
    }
    #li2 {
      background-color: blue;
    }
    </style>
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <ul>
      <li id="li1">
        start
        <div class="div1">
        </div>
        <div class="div2">
        </div>
        end
      </li>
      <li id="li2">
        start
        <div class="div1">
        </div>
        <div class="div2">
          433
        </div>
        end
      </li>
      <li>
        为什么div内加了文字后，由底端对齐变为顶端对齐
      </li>
      <li>
        怎么改成底端对齐？
      </li>
    </ul>
    图片是行内块元素:
    <img class="simg" src="images/cat.jpg" alt="">
    <img class="bimg" src="images/cat.jpg" alt="">
    。对吧！
  
  </body>
</html>
